<template>
  <div>
    <el-form :label-position="'left'" label-width="150px" >
      <el-form-item label="选择帖子分类">
      <el-select v-model="postStyle" clearable placeholder="帖子分类" >
              <el-option
              v-for="item in postStyleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="选择账号">
        <el-select v-model="sendList.user_id" clearable placeholder="运营账号" >
                <el-option
                v-for="item in accountOptions"
                :key="item.user_id"
                :label="item.nickname"
                :value="item.user_id">
                </el-option>
            </el-select>
      </el-form-item>
      <!-- <el-form-item label="选择账号">
        <el-select v-model="sendList.no_name" clearable placeholder="运营账号" >
                <el-option
                v-for="item in noNameOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
      </el-form-item> -->
      <el-form-item label="选择圈子">
        <el-select
                v-model="circle"
                filterable
                remote
                :loading="loading"
                placeholder="请输入圈子名"
                @change="getCircle"
                :remote-method="getCircleList"
                size="medium"
                    >
                <div v-if="circleList.length!=0">
                    <el-option
                    v-for="(item) in circleList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
                </div>
            </el-select>
      </el-form-item>
      <el-form-item label="选择帖子类型">
        <el-select v-model="sendList.classify_id" clearable placeholder="选择帖子类型" >
                <el-option
                        key="0"
                        label="全部"
                        value="0">
                </el-option>
              <el-option
              v-for="item in postTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              </el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="标题">
        <el-input v-model="sendList.title" ></el-input>
      </el-form-item>

      <el-form-item label="内容">
        <el-input
          type="textarea"
          :autosize="{minRows:5}"

          placeholder="请输入内容"
          v-model="sendList.content">
        </el-input>
      </el-form-item>
      <el-form-item label="图片"  v-if="postStyle==1">
        <el-upload
          class="upload-demo"
          action="https://bibiji.rzkeji.com/api/file/upload-img"
          name="photo"
          :on-preview="handlePreview"
          :on-success="handlePhoto"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="视频"  v-if="postStyle==2">
        <el-upload class="avatar-uploader el-upload--text" name="video" action="https://bibiji.rzkeji.com/api/file/upload-video" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
              <video v-if="videodUrl !='' && videoFlag == false " :src="videodUrl" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
                  <i v-else-if="videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
              <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
          </el-upload>
      </el-form-item>

      <div  class="add-table-wrapper">
        <el-button type="primary" @click="commit" class="add-table-wrapper-btn">发布</el-button>
        <!-- <el-button type="primary" @click="commit" class="add-table-wrapper-btn">取消</el-button> -->
      </div>
    </el-form>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        postStyle:'',
        postStyleOptions:[
          {label:'图文帖',value:1},
          {label:'视频帖',value:2}
          
        ],
        id:'',
        fileList:[],//图片列//{id:'111',url:'https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/1/13/f02a683c3f6f340851dda5added72d90.jpg'}
        
        videoFlag:false,
        videoUploadPercent:'',//上传的进度
        videodUrl:'',//上传的视频
        videoId:'',

        loading:false,
        
        accountOptions:[],//账号列表
        circleList:[],//圈子列表
        circle:'',
        operationNumList:[],//运营号列表

        postTypeOptions:[],//帖子类型
        sendList:{
          title:'',
          user_id:'',
          classify_id:'',//分类
          circle_id:'',
          no_name:'',
          content:'',
          // img_ids:'',
          // video_id:'',

          
          
        },
        
      }
    },
    computed: {
      imgList(){
        
        return this.fileList.map(item=>{
          if(item.response){
            return item.response.data.id
          }else{
            return item.id
          }
          
        })
      }
    },
    methods:{
      getCircle(e){
            this.sendList.circle_id=e;
            this.getArticleClassifyList()
        },
      async releasePostArticle(){
          //发布帖子
          let params={

          }
          let res=await this.$api.releasePostArticle({
            params
          })
        },
      async getCircleList(searchText){
          //获取圈子列表
          this.loading=true;
          let params={
              page:this.page,
              keyword:searchText,
              limit:100,
          }
          let res=await this.$api.getCircleList(
              params);
          if(res.data.level=='success'){
              this.circleList=res.data.data
          }
          this.loading=false
      },
      async getArticleClassifyList(){
          //获取圈子里的帖子类型
          let res=await this.$api.getArticleClassifyList({circle_id:this.sendList.circle_id})
          if(res.data.level=='success'){
              this.postTypeOptions=res.data.data
          }
      },
      async getOperationNumList(){
        //获取运营账号
            let params={
                page:1,
                limit:999
            }
            let res=await this.$api.getOperationNumList(
                params);
            if(res.data.level=='success'){
                this.accountOptions=res.data.data.map(item=>{return item.user_info});
            }
        },
      reBack(){
        this.$router.replace('SystemMsgList')
      },
      handleRemove(file, fileList) {
        //移除照片
        this.fileList=fileList
      },
       handleVideoSuccess(res, file) {
            //上传视频成功    
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            if(res.level=='success'){
                this.videoId=res.data.id;
                this.videodUrl=res.data.video_url;
            }
            
        },
        uploadVideoProcess(event, file, fileList){
            //获取上传视频进度
            this.videoFlag = true;
            this.videoUploadPercent = +file.percentage.toFixed(0);
        },
        beforeUploadVideo(file) {
            //上传视频前
            console.log(file)
            const isLt10M = file.size / 1024 / 1024  < 10;
            if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            // if (!isLt10M) {
            //     this.$message.error('上传视频大小不能超过10MB哦!');
            //     return false;
            // }
        },
      handlePreview(file) {
        console.log(file);
      },
      beforeAvatarUpload(file) {
        //上传照片前的操作
        // console.log(file,555)
      },
      handlePhoto(res, file,fileList) {
        //上传照片成功
//           console.log(this.fileList,"imgList");
        this.fileList=fileList.map(item=>{
          let obj={};
          obj.id=item.response.data.id;
          obj.url=item.response.data.img_url;
          return obj
        })
        this.fileList=fileList
      },
      ready(editorInstance){
        // 保存原始的 getActionUrl 方法
        // if(!UE.Editor.prototype._bkGetActionUrl){
        //     UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        // }
        // // 自定义
        // UE.Editor.prototype.getActionUrl = function (action) {
        //     console.log(action)
        //     if (action == 'uploadimage') {
        //     return `https://shop.rzkeji.com/api/other/ueditorAction?action=uploadimage`; // 调整上传图片的接口
        //     } else if (action == 'uploadVideo') {
        //     return `https://shop.rzkeji.com/api/other/ueditorAction?action=uploadVideo`; // 调整上传视频接口
        //     } else {
        //     return this._bkGetActionUrl.call(this, action); // 其他上传使用原始的 getActionUrl 方法
        //     }
        // }
      },
      async getSysNewsDetail(){
        //获取详情
        let params={id:this.id,user_token:this.user_token}
        let res=await  this.$api.getSysNewsDetail(params)
        if(res.data.level=='success' &&res.data.data){
          let data=res.data.data
          this.member.title=data.title;
          this.member.desc=data.desc;
          this.member.content=data.content||'';
          this.photoId=data.thumb_id;
          this.photoImg=data.thumb_url;
        }
      },
      async commit(){
        let params=this.sendList;
        if(this.postStyle==1){
          params.img_ids=this.imgList;
        }else{
          params.video_id=this.videoId
        }

        let res=await this.$api.releasePostArticle(params);
        if(res.data.level=='success'){
          this.$message({
            type:'success',
            message:res.data.message
          })
          setTimeout(()=>{
            this.$router.push('Post')
          },2000)
        }else{
          this.$message({
            type:'error',
            message:res.data.message
          })
        }

      }
    },
    mounted() {
      this.id=this.$route.query.id;
      this.getOperationNumList()
      if(this.id){
        this.getSysNewsDetail();
      }
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: contain;
  }
  .add-table-wrapper{
    display: flex;
    justify-content: center;
    padding:30px 0;
  }
</style>
